<template>
    <div class="w-full h-full flex-center">
        <div class="w-400px h-560px flex flex-col justify-center overflow-hidden relative">
            <div class="flex-center flex-col">
                <h2 class="text-2xl font-bold text-dark my-10px">注册用户</h2>
                <p class="text-gray-500 m-0">欢迎加入我们</p>
            </div>
            <n-form
                label-placement="left"
                label-width="72"
                class="my-30px flex flex-col gap-16px ease-in-out duration-300"
                :class="{ 'slide-left': formType === 1 }"
                :show-feedback="false"
            >
                <n-form-item label="账号">
                    <n-input
                        v-model:value="registerForm.account"
                        class="w-full"
                        placeholder="请输入账号"
                    />
                </n-form-item>
                <n-form-item label="用户名">
                    <n-input
                        v-model:value="registerForm.username"
                        class="w-full"
                        placeholder="请输入用户名"
                    />
                </n-form-item>
                <n-form-item label="密码">
                    <n-input
                        v-model:value="registerForm.password"
                        class="w-full"
                        type="password"
                        placeholder="请输入密码"
                    />
                </n-form-item>
                <n-form-item label="确认密码">
                    <n-input
                        v-model:value="registerForm.confirmPassword"
                        class="w-full"
                        type="password"
                        placeholder="请确认密码"
                    />
                </n-form-item>
            </n-form>
            <div
                class="w-full flex-center h-184px my-30px ease-in-out duration-300 absolute"
                :class="{ 'slide-right': formType === 0 }"
            >
                <n-form label-placement="left" label-width="72">
                    <n-form-item label="手机号">
                        <n-input
                            v-model:value="registerForm.phone"
                            class="w-full"
                            placeholder="请输入手机号"
                        />
                    </n-form-item>
                    <n-form-item label="地区">
                        <RegionSelects v-model="registerForm.location" />
                    </n-form-item>
                </n-form>
            </div>
            <div class="w-full flex gap-10px">
                <n-button
                    class="flex-1"
                    :focusable="false"
                    @click="
                        () => {
                            if (formType === 0) {
                                router.push({ path: '/login/index' })
                            } else {
                                formType = 0
                            }
                        }
                    "
                >
                    {{ formType === 0 ? '返回' : '上一步' }}
                </n-button>
                <n-button
                    type="primary"
                    class="flex-1"
                    :focusable="false"
                    @click="
                        () => {
                            if (formType === 0) {
                                nextStep()
                            } else {
                                handleRegister()
                            }
                        }
                    "
                >
                    {{ formType === 0 ? '下一步' : '注册' }}
                </n-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { RegionSelects } from 'v-region'
import { useRouter } from 'vue-router'

import { register } from '@/service/api/user'

const router = useRouter()

const formType = ref(0)
const registerForm = ref({
    account: '114514191',
    username: 'jibochang',
    password: '12345678',
    confirmPassword: '',
    phone: '',
    location: {
        province: {
            key: '',
            value: '',
        },
        city: '',
        area: '',
    },
    role: 0,
})

const nextStep = () => {
    const arr = Object.entries(registerForm.value).slice(0, 4)
    for (const item of arr) {
        if (!item[1] || (item[1] as string).trim() === '') {
            window.NMessage.warning('请完成表单')
            return
        }
    }
    if (registerForm.value.password !== registerForm.value.confirmPassword) {
        window.NMessage.warning('两次密码输入不一致')
        return
    }
    formType.value = 1
}

const handleRegister = async () => {
    if (!/^\d{11}$/.test(registerForm.value.phone)) {
        window.NMessage.warning('请输入正确的手机号')
        return
    }
    const location = registerForm.value.location
    if (!location.province || !location.city || !location.area) {
        window.NMessage.warning('请选择地区')
        return
    }
    try {
        await register(registerForm.value)

        window.NDialog.success({
            title: '注册成功',
            content: '用户注册成功,请返回登录',
            positiveText: '确定',
            closeable: false,
            maskClosable: false,
            onPositiveClick: () => {
                router.push({ path: '/login/index' })
            },
        })
    } catch (err) {
        console.log(err)
        window.NMessage.error(err.msg)
    }
}
</script>

<style scoped>
.slide-right {
    transform: translateX(120%);
}

.slide-left {
    transform: translateX(-120%);
}
</style>
